<template>
	<flow-mode-index v-if="isAlready" :flowInts="model"></flow-mode-index>

	<div v-if="drag" class="innerDrawer">
		<el-drawer v-model="drawerModel" size="130px;" direction="btt" :withHeader="false"
				   style="position: absolute;z-index: -1;">
			<el-form label-width="100" label-position="right" style="padding: 10px 10px 0 10px;" size="small">
				<el-row>
					<el-col :span="6" class="colClass">
						<el-form-item label="风格类型">
							<el-select v-model="widget.props.styleType" style="width: 100px;">
								<el-option label="默认" value="default"/>
								<el-option label="选项卡" value="card"/>
								<el-option label="卡片化" value="border-card"/>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="6" class="colClass">
						<el-form-item label="选项卡位置">
							<el-select v-model="widget.props.tabPosition" style="width: 100px;">
								<el-option label="顶部" value="top"/>
								<el-option label="左侧" value="left"/>
								<el-option label="右侧" value="right"/>
								<el-option label="底部" value="bottom"/>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="6" class="colClass">
						<el-form-item label="">
							<el-col :span="6" class="colClass">
								<el-form-item label="自动填充">
									<el-switch
										v-model="widget.props.stretch"
										style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
										:active-value="true"
										:inactive-value="false">
									</el-switch>
								</el-form-item>
							</el-col>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>
		</el-drawer>
	</div>

</template>
<script>

import draggable from "vuedraggable";
import ExFormItem from "@/components/exFormItem/index.vue";
import formRule from "@/utils/formRule";
import FlowDetail from "@/components/flowable/flowNode/flow-modeldetail.vue";
import FlowModeIndex from "@/components/flowable/flowModel/OldFlowModeIndex.vue";

export default {
	name: "dyFlowModel",
	components: {FlowModeIndex, FlowDetail, ExFormItem, draggable},
	props: {
		model: {type: Object, default: {}},
		widget: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
			drawerModel: false,
			dragAreaHeight: 150,
			activeName: 'tab1',
			addForm: {
				visible: false,
				label: '',
			},
		}
	},
	created() {
		this.isAlready = true;
	},

	methods: {
		dblClick: function () {
			this.drawerModel = true;
		},
	}
}
</script>
